<template name="love">
	<view>
		<img src="/static/love_bg.jpg" style="position: absolute; top: 0; left: 0;width:100%;height:100vh;opacity:0.5;" />
		<DaDropdownVue2 ref="daDropdown" :dropdownMenu="dropdownMenuList" themeColor="#ffcd4c" textColor="#aaaaaa"
			bgColor="#F8F0E9" :duration="300" fixedTop @confirm="handleConfirm" @close="handleClose" @open="handleOpen">
			<!-- <template v-slot:slot1="{item,index}">
		      <view style="padding: 40px">自定义插槽内容</view>
		    </template> -->
		</DaDropdownVue2>
		<scroll-view scroll-y="true" class="scrollbox" @scrolltolower="lower" enable-back-to-top="true"
			lower-threshold="112">
			<view class="waterfall">
				<uv-waterfall ref="waterfall" v-model="list" :add-time="10" :left-gap="leftGap" :right-gap="rightGap"
					:column-gap="columnGap" @changeList="changeList">
					<!-- 第一列数据 -->
					<template v-slot:list1>
						<!-- 为了磨平部分平台的BUG，必须套一层view -->
						<view>
							<view v-for="(item, index) in list1" :key="item.account_id" class="waterfall-item" @tap="toDetail(item.account_id)">
								<view class="waterfall-item__image">
									<img v-lazy="item.avatar" mode="widthFix" :style="{width:item.width+'px'}">
								</view>
								<view class="waterfall-item__ft">
									<view class="waterfall-item__ft__title">
										<view class="text-grey">
											<text class="text-cut">{{item.nick_name}}</text>
											<text class="cuIcon-male text-blue  margin-right-xs" v-if="item.gender == '男'"></text>
											<text class="cuIcon-female text-red  margin-right-xs" v-if="item.gender == '女'"></text>
										</view>
										<view v-if="item.birthday" class="cu-tag round bg-orange lg" style="letter-spacing: 1px;">
											{{calculateAge(item.birthday)}}岁
										</view>

									</view>
									<view class="waterfall-item__ft__address">
										<view class="text-grey text-sm">
											<text class="cuIcon-locationfill text-orange margin-right-xs"></text>
											{{item.region[0]}}
											{{item.region[1]}} {{item.region[2]}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>
					<!-- 第二列数据 -->
					<template v-slot:list2>
						<!-- 为了磨平部分平台的BUG，必须套一层view -->
						<view>
							<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item" @tap="toDetail(item.account_id)">
								<view class="waterfall-item__image">
									<img v-lazy="item.avatar" mode="widthFix" :style="{width:item.width+'px'}">
								</view>
								<view class="waterfall-item__ft">
									<view class="waterfall-item__ft__title">
										<view class="text-grey">
											<text class="text-cut">{{item.nick_name}}</text>
											<text class="cuIcon-male text-blue  margin-right-xs" v-if="item.gender == '男'"></text>
											<text class="cuIcon-female text-red  margin-right-xs" v-if="item.gender == '女'"></text>
										</view>

										<view v-if="item.birthday" class="cu-tag round bg-orange lg" style="letter-spacing: 1px;">
											{{calculateAge(item.birthday)}}岁
										</view>


									</view>
									<view class="waterfall-item__ft__address">
										<view class="text-grey text-sm">
											<text class="cuIcon-locationfill text-orange margin-right-xs"></text>
											{{item.region[0]}}
											{{item.region[1]}} {{item.region[2]}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>
				</uv-waterfall>
			</view>


			<view class="cu-modal" :class="modalName=='Image'?'show':''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<image :src="modalImg" mode="widthFix"></image>
				</view>
			</view>


		</scroll-view>
	</view>

</template>

<script>
	import DaDropdownVue2 from '@/components/da-dropdown-vue2/index.vue'
	const CHINA_REGIONS = require('@/components/da-dropdown-vue2/regions.json')
	import {
		profileInfo
	} from '../../api/account';
	import {
		objectList
	} from '../../api/object';
	export default {
		name: "love",
		components: {
			DaDropdownVue2
		},
		data() {
			return {
				modalName: null,
				modalImg: null,
				list: [],
				list1: [],
				list2: [],
				leftGap: 10,
				rightGap: 10,
				columnGap: 10,
				page: 1,
				is_loading: false,
				imageList: [],
				dropdownMenuList: [
					// {
					//     title: '搜索',
					//     type: 'search',
					//     prop: 'god0',
					//   },
					// {
					//     title: '插槽1',
					//     type: 'slot1',
					//     prop: 'god1',
					//   },
					{
						title: '地区',
						type: 'picker',
						prop: 'regins',
						// showAll: true,
						showIcon: true,
						// showAll 为true时相当于在options第一的位置插入“不限”项
						// { label: '不限', value: '-9999' },
						field: {
							label: 'label',
							value: 'value',
							children: 'children',
						},
						value: [], // 默认选中 级联X22
						options: CHINA_REGIONS,
					},
					{
						title: '筛选',
						type: 'filter',
						prop: 'filter',
						value: {
							gender: [],
							degrees: [],
							age: 18,
							income: '',
							height: '',
							weight: ''
						},
						options: [{
								title: '性别',
								type: 'checkbox',
								prop: 'gender',
								options: [{
										label: '全部',
										value: '全部'
									},
									{
										label: '男生',
										value: '男生'
									},
									{
										label: '女生',
										value: '女生'
									},
								]
							},
							{
								title: '学历(多选)',
								type: 'checkbox',
								prop: 'degrees',
								options: [{
										label: '小学',
										value: '小学'
									},
									{
										label: '初中',
										value: '初中'
									},
									{
										label: '高中',
										value: '高中'
									},
									{
										label: '大专',
										value: '大专'
									},
									{
										label: '本科',
										value: '本科'
									},
									{
										label: '硕士',
										value: '硕士'
									},
									{
										label: '博士',
										value: '博士'
									},
								],
							},
							{
								title: '年龄',
								type: 'slider-box',
								prop: 'age',
								componentProps: {
									min: 18,
									max: 45,
									step: 1,
									showValue: true,
								}
							},
							{
								title: '收入(年薪/万)',
								type: 'slider-box',
								prop: 'income',
								componentProps: {
									min: 5,
									max: 100,
									step: 1,
									showValue: true,
								},
							},
							{
								title: '身高(cm)',
								type: 'slider-box',
								prop: 'height',
								componentProps: {
									min: 130,
									max: 220,
									step: 1,
									showValue: true,
								},
							},
							{
								title: '体重(kg)',
								type: 'slider-box',
								prop: 'weight',
								componentProps: {
									min: 30,
									max: 200,
									step: 1,
									showValue: true,
								},
							},
						],
					},
				],
				regions: ['不限'],
				degrees: [],
				before: {},
				age: [18, 45],
				gender: [],
				income: [5, 100],
				height: [130, 220],
				weight: [30, 200]
			};
		},
		created() {


			this.getList()

		},
		methods: {
			getList() {
				objectList({
					page: this.page,
					regions: this.regions,
					degrees: this.degrees,
					age: this.age,
					gender: this.gender,
					income: this.income,
					height: this.height,
					weight: this.weight
				}).then(res => {
					if (res.list) {
						this.list.push.apply(this.list, res.list);
						// this.list = res.list
						if (res.list.length > 0) {
							this.page++
						}
					}
				}).catch(err => {
					console.log(err)
				});
			},
			changeList(e) {
				if (e.name == 'list1') {
					this.list1.push(e.value)

				} else {
					this.list2.push(e.value)
				}
			},
			handleConfirm(v) {

				let update = false
				if (v.regins != undefined && JSON.stringify(this.before.regions) != JSON.stringify(v.regins)) {
					this.regions = v.regins
					update = true
				}
				const degrees = JSON.stringify(this.before.degrees) != JSON.stringify(v.filter.degrees)
		const age =		JSON.stringify(this.before.age) != JSON.stringify(v.filter.age)
		const gender = JSON.stringify(this.before.gender) != JSON.stringify(v.filter.gender)
		const income = JSON.stringify(this.before.income) != JSON.stringify(v.filter.income)
		const height = JSON.stringify(this.before.height) != JSON.stringify(v.filter.height)
		const weight =  JSON.stringify(this.before.weight) != JSON.stringify(v.filter.weight)
			
				if(degrees || age || gender || income || height || weight){
					this.degrees = v.filter.degrees
					this.age = v.filter.age
					this.gender = v.filter.gender
					this.income = v.filter.income
					this.height = v.filter.height
					this.weight = v.filter.weight
					update = true
				}
				
				

				if (update) {
					this.list = []
					this.list1 = []
					this.list2 = []
					// 重新加载数据
					this.page = 1
					this.getList()
				}

				console.log('handleConfirm ==>', v, update)
			},
			handleClose(v) {
				// console.log('handleClose ==>', v)
			},
			handleOpen(v) {
				this.before = {}
				if (v == 0) {
					this.before.regions = JSON.parse(JSON.stringify(this.regions))
					this.$refs.daDropdown.updateMenu('regins', this.regions, 'value')
				} else if (v == 1) {
					this.before.degrees = JSON.parse(JSON.stringify(this.degrees))
					this.before.age = JSON.parse(JSON.stringify(this.age))
					this.before.gender = JSON.parse(JSON.stringify(this.gender))
					this.before.income = JSON.parse(JSON.stringify(this.income))
					this.before.height = JSON.parse(JSON.stringify(this.height))
					this.before.weight = JSON.parse(JSON.stringify(this.weight))
					this.$refs.daDropdown.updateMenu('filter', {
						degrees: this.degrees,
						age: this.age,
						gender: this.gender,
						income: this.income,
						height: this.height,
						weight: this.weight
					}, 'value')
				}
				console.log(this.before)
				console.log('handleOpen ==>', v)
			},
			previewImage(item) {
				uni.previewImage({
					indicator: "none",
					loop: false,
					urls: [item.avatar],
					longPressActions: {},
					sizeType: ['original']
				})
			},
			showModal(index) {
				console.log(index)
				this.modalImg = this.list[index].photos[0]
				this.modalName = "Image"
			},
			hideModal(e) {
				this.modalName = null
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/love/detail?id=' + id // 跳转到对应路径的页面
				});
			},
			lower() {
				if (!this.is_loading) {
					this.is_loading = true

					this.getList()
					this.is_loading = false
				}
			},
			// showModal(e) {
			// 	this.modalName = e.currentTarget.dataset.target
			// },
			// hideModal(e) {
			// 	this.modalName = null
			// },
			calculateAge(birthDateStr) {
				var birthDate = new Date(birthDateStr)
				var currentDate = new Date();
				var birthYear = birthDate.getFullYear();
				var birthMonth = birthDate.getMonth();
				var birthDayOfMonth = birthDate.getDate();
				var currentYear = currentDate.getFullYear();
				var currentMonth = currentDate.getMonth();
				var currentDayOfMonth = currentDate.getDate();

				var age = currentYear - birthYear;
				if (currentMonth < birthMonth || (currentMonth == birthMonth && currentDayOfMonth < birthDayOfMonth)) {
					age--;
				}
				return age;
			},
			timestampToString(timestamp) {
				var date = new Date(timestamp * 1000); // 由于时间戳通常以秒为单位，所以我们需要乘以1000
				var year = date.getFullYear();
				var month = date.getMonth() + 1; // 月份是从0开始的，所以需要+1
				var day = date.getDate();
				var hours = date.getHours();
				var minutes = date.getMinutes();
				var seconds = date.getSeconds();

				// 补零操作
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				// seconds = seconds < 10 ? '0' + seconds : seconds;

				return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* h5不用
	page {
		padding-top: 50px;
	} */
	::v-deep .uv-waterfall {
		padding-bottom: 60px;
	}

	.waterfall {
		// padding-bottom: 10px;

		.waterfall-item {
			overflow: hidden;
			margin-top: 10px;
			border-radius: 6px;
			width: 100%;

			.waterfall-item__image {
				position: relative;
			}
		}

		.waterfall-item__ft {
			padding: 10px;
			background: #fff;
			margin-top: -4px;

			.waterfall-item__ft__title {
				display: flex;
				align-items: center;
				justify-content: space-between;

			}

			.waterfall-item__ft__address {
				margin-top: 5px;
			}
		}
	}

	.scrollbox {
		/* height: 100vh; */
		/* height: 80vh; */
		/* padding-top: 45px; */
		height: calc(100vh - 50px);
		// background-image: url("");

	}
</style>